<template>
  <div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Button type="primary" @click="handleAllocation()">新增</Button>
      <Table
        size="small"
        :loading="tableLoading"
        :columns="columns"
        :data="data"
        class="ivu-mt-16"
      >
        <template slot-scope="{ row }" slot="status">
          <Button
            v-if="row.status === '1'"
            type="success"
            size="small"
            @click="changeStatus(row)"
            >启用</Button
          >
          <Button
            v-if="row.status === '0'"
            type="error"
            size="small"
            @click="changeStatus(row)"
            >停用</Button
          >
        </template>
        <template slot-scope="{ row }" slot="operation">
          <span v-if="row.is_inhibit_delete !== '1'">
            <a @click="handleAllocation(row)">编辑</a>
            <Divider type="vertical" />
            <a class="deleteBtn" @click="handleDelete(row)">删除</a>
          </span>
        </template>
      </Table>
      <div class="ivu-mt ivu-text-center">
        <Page
          :total="total"
          :current.sync="page"
          show-total
          show-elevator
          :page-size="pageSize"
          @on-change="changePage"
          :page-size-opts="pageOpts"
          show-sizer
          transfer
          @on-page-size-change="changePageSize"
        />
      </div>
    </Card>
    <Modal
      v-model="modal"
      :title="edit ? '编辑' : '新增'"
      :mask-closable="false"
      draggable
      @on-cancel="handleDrawerCancel()"
    >
      <Form
        :model="formItem"
        :rules="ruleValidate"
        ref="formItem"
        :label-width="80"
      >
        <FormItem label="名称" prop="input">
          <Input
            v-model="formItem.input"
            placeholder="请输入"
            clearable
          ></Input>
        </FormItem>
        <FormItem label="状态">
          <i-switch v-model="formItem.switch">
            <span slot="open">On</span>
            <span slot="close">Off</span>
          </i-switch>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="handleDrawerCancel()">取消</Button>
        <Button
          type="primary"
          :loading="loading"
          @click="handleSubmit('formItem')"
          >确定</Button
        >
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  GetProfessionList,
  CreateProfession,
  UpdateProfession,
  UpdateProfessionStatus,
  DeteleProfession,
} from "@api/setting";

export default {
  name: "diagnosis",
  data() {
    return {
      modal: false,
      edit: false,
      pageOpts: [10, 20, 30, 50],
      loading: false,
      tableLoading: false,
      formItem: {
        input: "",
        switch: true,
      },
      ruleValidate: {
        input: [{ required: true, message: "岗位名不可为空", trigger: "blur" }],
      },
      columns: [
        {
          title: "名称",
          key: "name",
        },
        {
          title: "状态",
          slot: "status",
        },
        {
          title: "操作",
          slot: "operation",
        },
      ],
      data: [],
      page: 1,
      pageSize: 10,
      total: 0,
    };
  },
  created() {
    this.onLoad();
  },
  methods: {
    onLoad() {
      /**
       * @description 岗位列表
       * @param {Object} param page  {String} 页数
       * @param {Object} param pageSize {String} 条数/页
       */
      this.tableLoading = true;
      const params = this.getParam();
      GetProfessionList(params)
        .then((res) => {
          this.data = res.list;
          this.page = res.page;
          this.pageSize = res.pageSize;
          this.total = res.total;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    getParam() {
      let params = {
        page: this.page,
        pageSize: this.pageSize,
      };
      return params;
    },
    changePage(page) {
      this.page = page;
      this.onLoad();
    },
    changePageSize(pagesize) {
      this.pageSize = pagesize;
      this.onLoad();
    },
    handleAllocation(row) {
      this.modal = true;
      if (row) {
        this.edit = true;
        this.formItem = {
          input: row.name,
          switch: row.status === "1",
          id: row.id,
        };
      }
    },
    handleDelete(row) {
      const param = {
        id: row.id,
      };
      this.$Modal.confirm({
        title: "删除岗位",
        content:
          '确定删除当前岗位<span style="color:#ed4014">' +
          row.name +
          "</span>?",
        onOk: () => {
          this.deleteSubmit(param);
        },
      });
    },
    changeStatus(row) {
      if (row.is_inhibit_delete !== "1") {
        const param = {
          id: row.id,
          status: row.status === "1" ? "0" : "1",
        };
        this.$Modal.confirm({
          title: "切换岗位状态",
          content:
            "确定" + (row.status === "1" ? "停用" : "启用") + "当前岗位?",
          onOk: () => {
            this.changeSubmit(param);
          },
        });
      } else {
        this.$Message.warning("不可停用！");
      }
    },
    handleDrawerCancel() {
      this.modal = false;
      this.edit = false;
      this.$refs["formItem"].resetFields();
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.loading = true;
          const params = {
            name: this.formItem.input,
            status: this.formItem.switch ? "1" : "0",
          };
          if (this.edit) {
            params.id = this.formItem.id;
            this.updateSubmit(params);
          } else {
            this.createSubmit(params);
          }
        } else {
          console.log("表单校验失败！");
        }
      });
    },
    createSubmit(params) {
      CreateProfession(params)
        .then((res) => {
          this.$Message.success(" 创建成功");
          this.loading = false;
          this.onLoad();
          this.handleDrawerCancel();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    updateSubmit(params) {
      UpdateProfession(params)
        .then((res) => {
          this.$Message.success(" 修改成功");
          this.loading = false;
          this.onLoad();
          this.handleDrawerCancel();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    deleteSubmit(params) {
      DeteleProfession(params)
        .then((res) => {
          this.$Message.success(" 删除成功");
          this.onLoad();
        })
        .catch(() => {});
    },
    changeSubmit(params) {
      UpdateProfessionStatus(params)
        .then((res) => {
          this.$Message.success("状态切换成功");
          this.onLoad();
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped></style>
